<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <el-form :inline="true" class="demo-form-inline filter">
      <el-form-item label="客户名称">
        <el-select
          v-model="listQuery.fsiteNo"
          clearable
          filterable
          placeholder="请选择客户名称"
        >
          <el-option
            v-for="item in fsiteNoBelongOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="样品名称">
        <el-input
          v-model.trim="listQuery.fsamplename"
          clearable
          class="filter-item"
          placeholder="请输入样品名称"
        />
      </el-form-item>
      <el-form-item label="样品分类">
        <el-select
          v-model="listQuery.fclassstno"
          clearable
          filterable
          placeholder="请选择样品分类"
        >
          <el-option
            v-for="item in catlist"
            :key="item.fclassstno"
            :label="item.fclassstname"
            :value="item.fclassstno"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          round
          size="medium"
          class="filter-item"
          @click="getList"
          :style="{ background: buttonColor.lookup, color: buttonColor.color }"
          >查找</el-button
        >
        <el-button
          round
          size="medium"
          class="filter-item"
          @click="openDataFrom"
          :style="{ background: buttonColor.add, color: buttonColor.color }"
          >添加</el-button
        >
        <el-button
          :style="{ background: buttonColor.import, color: buttonColor.color }"
          round
          size="medium"
          @click="handleUpload"
          >导入</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 查询结果 -->
    <el-table
      :height="buttonColor.clientHeight"
      v-loading="listLoading"
      :data="list"
      stripe
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      :header-cell-style="tableColor"
    >
      <el-table-column
        align="center"
        :width="buttonColor.operationThree"
        label="操作"
        class-name="small-padding"
      >
        <template slot-scope="scope">
          <div class="operationButton">
            <div
              :style="{ color: buttonColor.edit, cursor: 'pointer' }"
              @click="openDataFrom(scope.row)"
            >
              <img src="../../../../public/images/edit.png" />
              编辑
            </div>
            <div
              :style="{ color: buttonColor.delete, cursor: 'pointer' }"
              @click="Delete(scope.row)"
            >
              <img src="../../../../public/images/del.png" />
              删除
            </div>
            <div :style="{ color: buttonColor.tag, cursor: 'pointer' }" @click="labelTag(scope.row)">
                <img src="../../../../public/images/tag.png" >
                标签
              </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="序号" type="index" />
      <el-table-column
        align="left"
        label="样品编号"
        prop="fclassstno"
      />
      <el-table-column align="left"  width="200" label="样品名称" prop="fsamplename" />
      <el-table-column align="left"  width="200" label="样品条码" prop="fbarcode" />
      <el-table-column align="left" :formatter="formatfsupno" label="样品分类" prop="fclassstno" />
       <el-table-column align="left" label="型号" prop="fspec" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <!-- 导出弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="uploadVisible"
      width="auto"
    >
      <template slot="title">
        <div :style="exportColor">样品资料</div>
      </template>
      <div
        style="
          width: 300px;
          height: 200px;
          display: flex;
          flex-direction: column;
          align-items: center;
        "
      >
        <el-upload
          :on-success="uploadFileSuccess"
          :headers="headers"
          :action="uploadPath2"
          :data="{ tableName: 'Import_i_ts_good_info' }"
          :show-file-list="false"
          class="filter-item"
          style="margin-top: 20px"
          accept=".xlsx"
        >
          <el-button
            :style="{
              background: buttonColor.import,
              color: buttonColor.color,
            }"
            round
            size="medium"
            icon="el-icon-upload"
            >导入</el-button
          >
        </el-upload>
        <div style="margin-top: 30px; text-decoration: underline">
          <a :href="downUrl" style="color: blue">模板文件下载</a>
        </div>
      </div>
    </el-dialog>
    <DataFrom ref="DataFrom" :catlist="catlist"/>
    <Tabs ref="Tabs" :catlist="catlist"/>
  </div>
</template>
  
<script>
import {
  tableColor,
  titleColor,
  exportColor,
  buttonColor,
} from "@/filters/index";
import { fsiteOptionsByLevel, uploadPath2 } from "@/api/area";
import { list } from "@/api/sample/cat";
import {sampleInfolist, Delete } from "@/api/sample/detail";
import Pagination from "@/components/Pagination";
import { getApiUrl } from "@/utils/request";
import { getToken } from "@/utils/auth";
import Tabs from "./Tabs"
import DataFrom from "./DataFrom"
export default {
  name: "unit",
  components: { Pagination,Tabs,DataFrom },
  data() {
    return {
      tableColor,
      uploadPath2,
      buttonColor,
      exportColor,
      uploadVisible: false,
      listLoading: false,
      fsiteNoBelongOptions: [],
      list: [],
      catlist: [],
      downUrl: null,
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: this.$store.state.user.fsiteNo,
        fclassstno: undefined,
        fsamplename: undefined,
      },
      
    };
  },
  computed: {
    headers() {
      return {
        Authorization: getToken(),
      };
    },
  },
  created() {
    this.downUrl = getApiUrl() + "xlsx/1-2样品分类.xlsx";
    this.getcustom();
    this.getList();
    this.getcatlist();
  },
  methods: {
    //分类
    getcatlist() {
      list(this.listQuery).then((res) => {
        this.catlist = res.data.data.list;
      });
    },
    //列表
    getList() {
      sampleInfolist(this.listQuery).then((res) => {
        this.list = res.data.data.list;
        this.total = res.data.data.total;
      });
    },
    //客户列表
    getcustom() {
      fsiteOptionsByLevel(3)
        .then((response) => {
          this.fsiteNoBelongOptions = response.data.data.list;
        })
        .catch(() => {
          this.fsiteNoBelongOptions = [];
        });
    },
    //点击新增or编辑
    openDataFrom(row) {
      this.$refs.DataFrom.intData(row);
    },
    
    //删除
    Delete(row) {
      Delete(row)
        .then((res) => {
          this.$notify.success({
            title: "成功",
            message: "删除资料成功",
          });
          this.getList();
        })
        .catch((res) => {
          this.$notify.error({
            title: "失败",
            message: "删除资料失败",
          });
        });
    },
    //导入
    handleUpload() {
      this.uploadVisible = true;
    },
    //
    uploadFileSuccess: function (response) {
      this.uploadVisible = false;
      this.$notify.success({
        title: "导入",
        dangerouslyUseHTMLString: true,
        message: response.data,
      });
    },
    //标签
    labelTag(row)
    {
      this.$refs.Tabs.opentabs(row);
    },
    // 供应商
    formatfsupno: function (row, column) {
      if (this.catlist.length > 0) {
        for (let i = 0; i < this.catlist.length; i++) {
          if (row.fclassstno === this.catlist[i].fclassstno) {
            return this.catlist[i].fclassstname;
          }
        }
        return "";
      } else {
        return "";
      }
    },
  },
};
</script>
  